<template>
  <div class="tags-page">
    <div class="tags-header">
      <h1 class="tags-title">标签</h1>
    </div>
    
    <div class="tags-container">
      <div 
        v-for="tag in tags" 
        :key="tag.tagId"
        class="tag-item"
        :style="{ backgroundColor: getTagColor(tag.name) }"
        @click="handleTagClick(tag)"
      >
        <span class="tag-name">{{ tag.name }}</span>
        <span class="tag-count">{{ tag.usageCount || 0 }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getAllTags, type TagVO } from '@/api/tags'

const router = useRouter()
const tags = ref<TagVO[]>([])
const loading = ref(false)

// 标签颜色数组
const tagColors = [
  '#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', 
  '#feca57', '#ff9ff3', '#54a0ff', '#5f27cd',
  '#00d2d3', '#ff9f43', '#10ac84', '#ee5a24'
]

// 获取标签颜色
const getTagColor = (tagName: string) => {
  const index = tagName.charCodeAt(0) % tagColors.length
  return tagColors[index]
}

// 获取所有标签
const fetchTags = async () => {
  try {
    loading.value = true
    const response = await getAllTags()
    if (response.code === 200 && response.data) {
      tags.value = response.data
    }
  } catch (error) {
    console.error('获取标签失败:', error)
  } finally {
    loading.value = false
  }
}

// 处理标签点击
const handleTagClick = (tag: TagVO) => {
  router.push({
    path: '/posts',
    query: {
      tagId: tag.tagId.toString(),
      tagName: tag.name
    }
  })
}

onMounted(() => {
  fetchTags()
})
</script>

<style lang="scss" scoped>
.tags-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  min-height: 100vh;
}

.tags-header {
  text-align: center;
  margin-bottom: 3rem;
}

.tags-title {
  font-size: 3rem;
  font-weight: bold;
  color: #333;
  margin: 0;
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.tag-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  }
}

.tag-name {
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
}

.tag-count {
  background-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 0.2rem 0.6rem;
  border-radius: 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  min-width: 1.5rem;
  text-align: center;
}

@media (max-width: 768px) {
  .tags-page {
    padding: 1rem;
  }
  
  .tags-title {
    font-size: 2rem;
  }
  
  .tag-item {
    padding: 0.5rem 1rem;
  }
  
  .tag-name {
    font-size: 0.875rem;
  }
  
  .tag-count {
    font-size: 0.75rem;
  }
}
</style>